<template>
  <view>
    <text>{{ result }}</text>
  </view>
</template>

<script>
export default {
  props: {
    a: {
      type: Number,
      required: true
    },
    b: {
      type: Number,
      required: true
    },
    operation: {
      type: String,
      required: true
    }
  },
  computed: {
    result() {
      switch (this.operation) {
        case 'add':
          return this.a + this.b;
        case 'subtract':
          return this.a - this.b;
        case 'multiply':
          return this.a * this.b;
        case 'divide':
          return this.b !== 0 ? this.a / this.b : 'Error';
        default:
          return 'Invalid operation';
      }
    }
  }
}
</script>

<style scoped>
text {
  font-size: 24px;
}
</style>